export default function updateNodeElement (newElement, virtualDOM, oldVirtualDOM = {}) {
    const oldProps = oldVirtualDOM.props || {}
    const newProps = virtualDOM.props || {}


    Object.keys(newProps).forEach(propName => {
        const newPropsValue = newProps[propName] || {}
        const oldPropsValue = oldProps[propName] || {}

        if (newPropsValue !== oldPropsValue) {
            if (propName.slice(0, 2) === "on") {
                // 增加事件
                const eventName = propName.toLowerCase().slice(2)
                newElement.addEventListener(eventName, newPropsValue)
    
                if (oldPropsValue) {
                    // 如果有舊事件存在，要刪除它
                    newElement.removeEventListener(eventName, oldPropsValue)
                }
            } else if (propName === "value" || propName === "checked") {
                // value和checked不允許用setAttribute
                newElement[propName] = newPropsValue
            } else {
                if (propName === "className") {
                    // 轉為class
                    newElement.setAttribute("class", newPropsValue)
                } else {
                    newElement.setAttribute(propName, newPropsValue)  
                }
            }
        }
    })

    // 刪除新節點沒有的屬性
    Object.keys(oldProps).forEach(propName => {
        const newPropsValue = newProps[propName]
        const oldPropsValue = oldProps[propName]
        // 屬性被刪除了
        if (!newPropsValue) {
            if (propName.slice(0,2) === 'on') {
                const eventName = propName.toLowerCase().slice(2)
                newElement.removeEventListener(eventName, oldPropsValue)
            } else if (propName !== "children") {
                newElement.removeAttribute(propName)
            }
        }
    })
}